<template>
    <div>
        <p>Reversed Message:{{reversedMessage1}}</p>
        <p>Reversed Message:{{reversedMessage2()}}</p>
        <p> {{ now }}</p>
        <button @click="() => $forceUpdate()">forceUpdate</button>
        <br/>
        <input v-model="message"/>
    </div>
</template>
<script>
export default {
    data(){
        return {
            message : 'hello vue'
        }
    },
    computed:{
        reversedMessage1:function(){
            console.log("execute computed ")
            return this.message.split("").reverse().join("");
        },
        now : function(){
            return Date.now();
        }
    },
    methods:{
        reversedMessage2:function(){
            console.log("execute method");
            return this.message.split("").reverse().join("");
        }
    }
}
</script>
